<template>
    <div class="main-content-right">
        <!-- 我的课程 -->
        <div class="course-show">
            <div class="title">
                <el-tabs v-model="className">
                    <el-tab-pane label="我的课程" name="我的课程"></el-tab-pane>
                    <el-tab-pane label="我的课表" name="我的课表"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- 课程 -->
            <div
                class="right-content"
                style="margin-top: 0px;"
                v-if="className == '我的课程'"
            >
                <div class="item" v-for="(item, index) in 8" :key="index">
                    <div class="right-content-item-kc">
                        <div class="right-content-item-classTop">
                            <div class="class-title">小蘑菇的种类英语教学</div>
                            <div class="class-time">今天19:34开课</div>
                            <div class="class-teacher">
                                <img
                                    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg"
                                />
                                良民老师
                            </div>
                        </div>
                        <div class="right-content-item-classBotton">
                            进入学习
                        </div>
                    </div>
                </div>
            </div>
            <!-- 课表 -->
            <div class="right-Table" style="margin-top: 0px;" v-else>
                <!-- 课表 -->
                <div class="classTable" v-if="dateData.length != 0">
                    <div class="classTable-left">
                        <div id="cldBody">
                            <table>
                                <thead>
                                    <tr id="week">
                                        <td>一</td>
                                        <td>二</td>
                                        <td>三</td>
                                        <td>四</td>
                                        <td>五</td>
                                        <td>六</td>
                                        <td>日</td>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                    <tr
                                        class="classtableitem"
                                        v-for="(item, index) in dateData"
                                        :key="index"
                                    >
                                        <td
                                            :class="{
                                                tdtext: isbgText(item2.mon),
                                                isweekend: isweekend(index2)
                                            }"
                                            @click="selectData(index, index2)"
                                            v-for="(item2, index2) in item"
                                            :key="index + '-' + index2"
                                        >
                                            <div
                                                :class="
                                                    nowYear == curYear &&
                                                    item2.mon == nowMon &&
                                                    item2.day == curDay
                                                        ? 'isToday'
                                                        : ''
                                                "
                                            >
                                                <span>{{ item2.day }}</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="classTable-right">
                        <div class="calent-title">
                            <i class="el-icon-arrow-left" @click="preMon"></i>
                            <span class="calent-title-text"
                                >{{ curYear }}年 {{ curMonth }}月</span
                            >
                            <i class="el-icon-arrow-right" @click="nextMon"></i>
                        </div>
                        <!-- :class="(dateData[selectDateIndex.x][selectDateIndex.y].day < 10) ? : 'bigShowDay-sm':'bigShowDay'" -->
                        <div
                            v-show="dateData.length != 1"
                            :class="
                                isBigSm(
                                    dateData[selectDateIndex.x][
                                        selectDateIndex.y
                                    ].day
                                )
                                    ? 'bigShowDay-sm'
                                    : 'bigShowDay'
                            "
                        >
                            {{
                                dateData[selectDateIndex.x][selectDateIndex.y]
                                    .day
                            }}
                        </div>
                        <div class="smSubText" v-show="dateData.length != 1">
                            周{{ week[(selectDateIndex.y + 1) % 7] }}
                        </div>
                        <div v-show="dateData.length == 1" class="smShowDay">
                            <div>
                                {{
                                    dateData[selectDateIndex.x][
                                        selectDateIndex.y
                                    ].day
                                }}
                            </div>
                            <div>周{{ week[(selectDateIndex.y + 1) % 7] }}</div>
                        </div>
                    </div>
                </div>
                <!-- 下拉 -->
                <div class="stretch-line">
                    <el-divider
                        ><div
                            class="stretch-Btn-up"
                            @click="stretchCalent"
                            v-show="dateData.length != 1"
                        ></div>
                        <div
                            class="stretch-Btn-down"
                            @click="stretchCalent"
                            v-show="dateData.length == 1"
                        ></div
                    ></el-divider>
                </div>
                <!-- 时间线 -->
                <el-timeline class="lineContent1">
                    <el-timeline-item v-for="(i, index) in 5" :key="index">
                        <div class="timeline">
                            <div class="timeTitle">
                                <span class="text-tag">8月15日</span>
                                <span class="text-tag">8:00 - 9:00</span>
                                <span class="classTag text-tag">英语</span>
                            </div>
                            <div class="classMsgBox">
                                <div class="className">第一节课口语练习</div>
                                <div class="subClassName">
                                    良民 | 小蘑菇魔法英语：口语练习
                                </div>
                                <div class="liveBtn">直播</div>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
    </div>
</template>

<script>
import { showCld, whatDay } from "@/utils/calendar";
export default {
    components: {},
    props: {},
    data() {
        return {
            className: "我的课表",
            //日历
            nowYear: "",
            curYear: "",
            curMonth: "",
            curDay: "",
            nowMon: "",
            week: ["日", "一", "二", "三", "四", "五", "六"],
            dateData: [], //显示日历
            locald_dateData: [], //保存日历数据
            oldX: 0,
            selectDateIndex: {
                x: 0,
                y: 0
            }
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        var curDate = new Date();
        this.nowYear = curDate.getFullYear();
        this.curYear = curDate.getFullYear();
        this.curMonth = curDate.getMonth() + 1;
        this.nowMon = curDate.getMonth() + 1;
        this.curDay = curDate.getDate();
        this.getCalendar(this.curYear, this.curMonth);
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        //日历选择
        isbgText(mon) {
            if (mon != this.curMonth) {
                return true;
            } else {
                return false;
            }
        },
        isweekend(index) {
            if ((index + 1) % 7 == 6 || (index + 1) % 7 == 0) {
                return true;
            } else {
                return false;
            }
        },
        isBigSm(Num) {
            if (Num < 10) {
                return true;
            } else {
                return false;
            }
        },
        selectData(x, y) {
            this.selectDateIndex.x = x;
            this.selectDateIndex.y = y;
        },
        //展开隐藏
        stretchCalent() {
            console.log(this.selectDateIndex);
            if (this.dateData.length == 1) {
                this.dateData = JSON.parse(
                    JSON.stringify(this.locald_dateData)
                );
                this.selectDateIndex.x = this.oldX;
            } else {
                this.dateData = [];
                this.dateData.push(
                    JSON.parse(
                        JSON.stringify(
                            this.locald_dateData[this.selectDateIndex.x]
                        )
                    )
                );
                this.oldX = this.selectDateIndex.x;
                this.selectDateIndex.x = 0;
            }
        },
        getCalendar(curYear, curMonth) {
            this.dateData = showCld(
                curYear,
                curMonth,
                whatDay(curYear, curMonth)
            );
            this.locald_dateData = JSON.parse(JSON.stringify(this.dateData));
            this.locald_dateData.forEach((el, index) => {
                el.forEach((item, index2) => {
                    if (this.curDay == item.day) {
                        this.selectDateIndex.x = index;
                        this.selectDateIndex.y = index2;
                    }
                });
            });
        },
        nextMon() {
            if (this.curMonth == 12) {
                this.curYear += 1;
                this.curMonth = 1;
            } else {
                this.curMonth += 1;
            }
            this.getCalendar(this.curYear, this.curMonth);
        },
        preMon() {
            if (this.curMonth == 1) {
                this.curYear -= 1;
                this.curMonth = 12;
            } else {
                this.curMonth -= 1;
            }
            this.getCalendar(this.curYear, this.curMonth);
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 24px 0px;
    background: #fff;
    box-sizing: border-box;
    .title {
        font-size: 20px;
    }
}
/* 我的课程 */
.course-show {
    margin: 0px 24px;
}
.right-content {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 24px 0px;
    .item {
        height: 200px;
        width: 270px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.right-content-item-kc {
    width: 245px;
    height: 172px;
    background: #ffffff;
    border: 1px solid #dadfe6;
    opacity: 1;
    border-radius: 8px;
}
.right-content-item-classTop {
    width: 80%;
    margin: 0 auto;
    height: 141px;
    border-bottom: 1px solid #ebeff5;
    padding: 17px 0px;
    box-sizing: border-box;
    .class-title {
        color: #2d3440;
        font-size: 18px;
    }
    .class-time {
        color: #9ea4b0;
        margin: 11px 0px;
    }
    .class-teacher {
        color: #2c323f;
        img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 10px;
        }
    }
}
.right-content-item-classBotton {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #018854;
    cursor: pointer;
}

/* 课程表 */
.right-Table {
    width: 100%;
}
.classTable {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 37px;
    .classTable-left {
        min-width: 520px;
    }
    .classTable-right {
        min-width: 250px;
    }
    #cldBody {
        min-width: 500px;
    }
    table {
        background-color: #ffffff;
        padding: 10px;
        border-radius: 10px;
    }
    td {
        height: 50px;
        min-width: 71.5px;
        width: 200px;
        text-align: center;
        font-size: 14px;
        color: #2d3440;
    }
    .classtableitem {
        td {
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            position: relative;
            &:hover {
                background: #eeeeee;
            }
        }
    }
    #week {
        td {
            font-weight: 600;
        }
    }
}
.isweekend {
    &::after {
        content: " ";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #018854;
        position: absolute;
        bottom: 2px;
        left: 47%;
    }
}
.isToday {
    span {
        display: none;
    }
    &:after {
        content: "今";
        border: #018854 1px solid;
        display: inline-block;
        border-radius: 50%;
        font-size: 14px;
        padding: 2px 5px;
        color: #018854;
    }
}
.tdtext {
    color: #dadfe6 !important;
    cursor: default !important;
    &:hover {
        background: #ffffff !important;
    }
}
.classTable-right {
    .calent-title {
        display: flex;
        justify-content: space-between;
        height: 20px;
        line-height: 20px;
        padding: 20px 10px;
    }
    .layui-icon {
        color: rgba(0, 0, 0, 0.46);
        &:hover {
            cursor: pointer;
            color: #333;
        }
    }
    .calent-title-text {
        color: #2d3440;
        font-size: 14px;
        font-weight: 600;
    }
    .bigShowDay {
        font-size: 110px;
        width: 128px;
        margin: 0 auto;
        margin-top: 28px;
        color: #2d3440;
    }
    .bigShowDay-sm {
        font-size: 110px;
        width: 70px;
        margin: 0 auto;
        margin-top: 28px;
        color: #2d3440;
    }
    .smShowDay {
        width: 60px;
        margin: 0 auto;
        height: 22px;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: #2d3440;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .smSubText {
        font-size: 16px;
        width: 32px;
        margin: 0 auto;
        color: #2d3440;
        font-weight: 600;
    }
}
.stretch-line {
    width: 100%;
    position: relative;
    .stretch-Btn-up {
        width: 113px;
        height: 50px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -34px;
        background-image: url("../../../assets/images/classTable/1599810433.png");
        background-size: 100% 100%;
        cursor: pointer;
    }
    .stretch-Btn-down {
        width: 113px;
        height: 50px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -15px;
        background-image: url("../../../assets/images/classTable/1599816627down.png");
        background-size: 100% 100%;
        cursor: pointer;
    }
}
.el-timeline {
    margin-top: 60px;
}
.timeline {
    // margin-top: 60px;
    .timeTitle {
        height: 20px;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        color: #9ea4b0;
        margin-bottom: 11px;
    }
    .classMsgBox {
        width: 100%;
        height: 120px;
        padding: 25px;
        background: #ffffff;
        border-radius: 5px;
        box-shadow: 0 5px 10px #ebeff5;
        box-sizing: border-box;
        position: relative;
    }
    .className {
        height: 22px;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: #666666;
    }
    .text-tag {
        margin-right: 5px;
    }
    .classTag {
        background: #dbf1ff;
        border: 1px solid #91d5ff;
        border-radius: 8px;
        height: 17px;
        font-size: 12px;
        line-height: 17px;
        color: #3980ed;
        display: inline-block;
        padding: 2px 5px;
    }
    .subClassName {
        height: 20px;
        font-size: 14px;
        font-weight: 300;
        line-height: 19px;
        color: #9ea4b0;
        margin-top: 30px;
    }
    .liveBtn {
        width: 88px;
        height: 32px;
        background: #018854;
        border-radius: 16px;
        line-height: 32px;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
        position: absolute;
        right: 40px;
        top: 34px;
        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
